<!--
 * @Descripttion: 
 * @version: 
 * @Author: zhang jianjun
 * @Date: 2022-06-20 11:33:28
 * @LastEditors: zhang jianjun
 * @LastEditTime: 2022-06-20 11:42:50
-->
<template>
  <div class="hello">
    <h2>Hello Ts页面</h2>
    <div>消息：{{msg}}</div>
    <div>反转：{{reverseMsg}}</div>
    <div>
      <ul>
        <li>姓名：{{user.username}}</li>
        <li>分数：{{user.score}}</li>
        <li>状态：{{user.status}}</li>
      </ul>
      <button @click="toggleStatus()">切换状态</button>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
let msg:string = '这是一条ts语法规范的字符串'

// ts接口规范
interface Userinfo{
  username: string,
  score: number,
  status: boolean,
  desc?: string
}
let user:Userinfo = {
  username: 'zhangsan',
  score: 60,
  status: true,
}
export default defineComponent({
  name: 'Helloworld',
  data() {
    return {
      msg,
      user
    }
  },
  methods: {
    toggleStatus():void {
      this.user.status = !this.user.status
    }
  },
  computed: {
    reverseMsg():string {
      return this.msg.split('').reverse().join('')
    }
  }
});
</script>

<style scoped>

</style>
